<template>
  <div>
    <!-- 1.0 面包屑导航 -->
    <div class="breadcrumbStyle">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/admin/goodslist' }">购物商城</el-breadcrumb-item>
        <el-breadcrumb-item>新增内容</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 2.0 新增商品的form表单 -->
    <div class="addGoodsFormStyle">
      <el-form :model="goods" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="10">
            <el-form-item label="标题" prop="title">
              <el-input v-model="goods.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="副标题">
              <el-input v-model="goods.sub_title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属类别" prop="category_id">
              <el-select v-model="goods.category_id" placeholder="请选择类别">
                <el-option v-for="item in categories" :key="item.category_id" :label="item.title" :value="item.category_id">
                    <span v-for="y in (item.class_layer-1)">&nbsp;</span>
                    <span v-if="item.parent_id>0">|-</span>{{item.title}}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否发布">
              <el-switch v-model="goods.status" active-color="#409EFF" inactive-color="#C0CCDA">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="轮播图">
              <el-switch v-model="goods.is_slide"></el-switch>&nbsp;&nbsp; 置顶
              <el-switch v-model="goods.is_top"></el-switch>&nbsp;&nbsp; 推荐
              <el-switch v-model="goods.is_hot"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="上传封面">
              <el-upload class="upload-demo" action="http://39.108.135.214:8899/admin/article/uploadimg"
              :on-success="uploadImgSuccess" :file-list="goods.imgList" list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="图片相册">
              <el-upload class="upload-demo" action="http://39.108.135.214:8899/admin/article/uploadfile" 
              :on-success="uploadFileSuccess" :file-list="goods.fileList" list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="商品货号">
              <el-input v-model="goods.goods_no"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="库存数量">
              <el-input v-model="goods.stock_quantity"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="市场价格">
              <el-input v-model="goods.market_price"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="销售价格">
              <el-input v-model="goods.sell_price"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="内容摘要" prop="zhaiyao">
              <el-input type="textarea" :rows="3" v-model="goods.zhaiyao"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="详细内容" prop="content">
              <quill-editor :content="goods.content" @change="onEditorChange($event)">
              </quill-editor>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
  .breadcrumbStyle {
    height: 30px;
    line-height: 50px;
    padding: 6px;
    margin-left: 10px;
    border-bottom: 1px solid #f0f0f0;
  }

  .addGoodsFormStyle {
    margin: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
  }

  .quill-editor .ql-container.ql-snow .ql-editor.ql-blank {
    height: 100px;
  }
</style>

<script>
  // require styles
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  import { quillEditor } from 'vue-quill-editor'

  export default {
    data() {
      return {
        categories: [],//所属分类
        goods: {
          title: "", //标题
          sub_title: "", //副标题
          status: true,//是否发布
          is_slide: true,//显示到首页轮播图
          is_top: true,//置顶
          is_hot: false,//推荐
          goods_no: "",//商品货号
          stock_quantity: 0,//库存数量
          market_price: 0,//市场价格
          sell_price: 0,//销售价格
          zhaiyao: "",//摘要
          content: "",//详细内容
          imgList: [
            // {
            //   name: 'food.jpeg',
            //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            // }
          ],//上传封面
          fileList: []
        },
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          category_id:[
            { required: true, message: '请选择类别', trigger: 'blur' }
          ],
          zhaiyao: [
            { required: true, message: '请输入摘要', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入详细部分', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.getCategoriesData()
    },
    methods: {
      //上传封面图片
      uploadImgSuccess(response, file, fileList){
        this.goods.imgList = [response]
      },
      //上传图片相册
      uploadFileSuccess(response, file, fileList){
        this.goods.fileList.push(response)
      },
      //获取所属分类数据
      getCategoriesData() {
        const url = "admin/category/getlist/goods"

        this.$axios.get(url).then(response => {
          this.categories = response.data.message
        })
      },
      //提交
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            this.$axios.post("admin/goods/add/goods",this.goods).then(response=>{
              if(response.data.status==1){
                this.$message.err(response.data.message)
                return
              }

              this.$router.push({name:"goodslist"})
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //富文本编辑器值改变事件
      onEditorChange(event) {
        this.goods.content = event.html
      }
    },
    components: {
      quillEditor
    }
  }
</script>